<div class="help">

    <h1>Table of Contents</h1>

    <ul class="toc">
        <li>
            <a href="#about">About</a>
        </li>
        <li>
            <a href="#help_Layers">Layers</a>
            <ul>
                <li><a href="#help_Creating_New_Layers">Creating New Layers</a></li>
                <li><a href="#help_Saving_and_Loading_Layers">Saving and Loading Layers</a></li>
                <li><a href="#help_Creating_Layers_from_Other_Layers">Creating Layers from Other Layers</a></li>
            </ul>
        </li>

        <li>
            <a href="#help_Layer_Controls">Layer Controls</a>
            <ul>
                <li><a href="#help_Layer_Information">Layer Information</a></li>
                <li><a href="#help_Sorting">Sorting</a></li>
                <li><a href="#help_Filtering">Filtering</a></li>
                <li>
                    <a href="#help_Color_Setup">Color Setup</a>
                    <ul>
                        <li><a href="#help_Tactic_Row_Background">Tactic Row Background</a></li>
                        <li><a href="#help_Scoring_Gradient">Scoring Gradient</a></li>
                    </ul>
                </li>
                <li><a href="#help_Hiding_Disabled_Techniques">Hiding Disabled Techniques</a></li>
                <li><a href="#help_Show_Hide_Subtechniques">Showing or Hiding Sub-techniques</a></li>
                <li>
                    <a href="#help_Changing_Layout">Changing the Matrix Layout</a>
                    <ul>
                        <li><a href="#help_Side_Layout">Side Layout</a></li>
                        <li><a href="#help_Flat_Layout">Flat Layout</a></li>
                        <li><a href="#help_Mini_Layout">Mini Layout</a></li>
                        <li><a href="#help_IDs_Names">Showing IDs and Names</a></li>
                    </ul>
                </li>
                <li><a href="#help_Legend">Legend</a></li>
            </ul>
        </li>
        <li>
            <a href="#help_Technique_Controls">Technique Controls</a>
            <ul>

                <li><a href="#help_Disabling_Techniques">Disabling Techniques</a></li>
                <li><a href="#help_Assigning_Manual_Colors">Assigning Manual Colors</a></li>
                <li><a href="#help_Scoring_Techniques">Scoring Techniques</a></li>
                <li><a href="#help_Adding_Comments_to_Techniques">Adding Comments to Techniques</a></li>
                <li><a href="#help_Clearing_Selected_Techniques_Annotations">Clearing Annotations on Techniques</a> </li>
            </ul>
        </li>
        <li>
            <a href="#help_Selecting_Techniques">Selecting Techniques</a>
            <ul>
                <li><a href="#help_Selecting_with_the_Mouse">Selecting with the Mouse</a></li>
                <li><a href="#help_Selection_Behavior">Selection Behavior</a></li>
                <li><a href="#help_Search_Interface">Search Interface</a></li>
                <li><a href="#help_Multiselct_Interface">Multiselect Interface</a></li>
            </ul>
        </li>
        <li>
            <a href="#help_Customizing_The_Navigator">Customizing The Navigator</a>
            <ul>
                <li><a href="#help_Default_Layers">Default Layers</a></li>
                <li><a href="#help_Disable_Features">Disabling Features</a></li>
            </ul>
        </li>
        <li>
            <a href="#help_Rendering_Layers_As_SVG">Exporting Layers as SVG</a>
            <ul>
                <li><a href="#help_exporting_units">Measurement Units</a></li>
                <li><a href="#help_exporting_image_size">Configuring Image Size</a></li>
                <li><a href="#help_exporting_text">Configuring Text</a></li>
                <li><a href="#help_exporting_legend_config">Customizing the Legend</a></li>
                <li><a href="#help_exporting_display_settings">Display Settings</a></li>
            </ul>
        </li>
        <li>
            <a href="#help_Rendering_Layers_As_XLSX">Exporting Layers to MS Excel</a>
        </li>
        <li><a href="#notice">Notice</a></li>

    </ul>

    <h1 id="about"> MITRE ATT&CK® Navigator Version {{nav_version}}</h1>
    <p>
        The ATT&CK Navigator is designed to provide basic navigation and
        annotation of ATT&CK matrices, something that people are already doing
        today in tools like Excel. We've designed it to be simple and generic -
        you can use the Navigator to visualize your defensive coverage, your
        red/blue team planning, the frequency of detected techniques or anything
        else you want to do. The Navigator doesn't care - it just allows you to
        manipulate the cells in the matrix (color coding, adding a comment,
        assigning a numerical value, etc.). We thought having a simple tool that
        everyone could use to visualize the matrix would help make it easy to
        use ATT&CK.
    </p>
    <p>
        The principal feature of the Navigator is the ability for users to
        define layers - custom views of the ATT&CK knowledge base - e.g. showing
        just those techniques for a particular platform or highlighting
        techniques a specific adversary has been known to use. Layers can be
        created interactively within the Navigator or generated programmatically
        and then visualized via the Navigator.
    </p>
    <p>
        Bug reports and feature requests can be submitted to our <a href="https://github.com/mitre-attack/attack-navigator/issues">GitHub Issue Tracker</a>.
        The source code for the ATT&CK Navigator can be retrieved from our
        <a href="https://github.com/mitre-attack/attack-navigator">GitHub repository</a>.
    </p>


    <!-- sections -->
    <h1 id="help_Layers">Layers</h1>
    <p>
      A layer constitutes a view of the tactics and techniques matrix for a
      specific technology domain. Version {{nav_version}} of the Navigator can manipulate
      either the Enterprise, Mobile, or ICS
      ATT&CK technology domain knowledge bases. Within a technology domain, the
      Navigator allows you to filter your view of the matrix in a variety of
      ways, displaying the tactics and techniques that are important to you.
    </p>
    <p>
      You can view the definition of any technique in the visible matrix by
      right-clicking on the technique and selecting "view technique" in the
      pop-up menu. A new browser tab will be opened displaying the definition of
      the technique. In this way the Navigator allows you to explore a given
      ATT&CK matrix and access the definitions of the techniques.
    </p>
    <p>
      Beyond the filters, layers also provide a means to customize your view of
      the matrix. To that end you can <a href="#help_Assigning_Manual_Colors">color</a>, <a href="#help_Hiding_Disabled_Techniques">hide</a>, <a href="#help_Adding_Comments_to_Techniques">comment</a>, and assign <a href="#help_Scoring_Techniques">numeric
      scores</a> to techniques to aid in analysis of threats and your defenses
      against those threats. As stated earlier, the Navigator is designed to be
      simple, allowing you to assign whatever meaning you want to the
      color-codings, scores, and comments. This way the Navigator can support
      whatever you want to do without requiring changes to the Navigator code
      itself.
    </p>
    <p>
      Each layer created is independent of other layers. However, layers can be
      <a href="#help_Creating_Layers_from_Other_Layers">combined</a> in ways to support analysis, or <a href="#help_Saving_and_Loading_Layers">saved locally</a>. Layer files are
      saved in easy to parse and easy to generate JSON file so that ATT&CK data
      can be used in other applications, analyzed beyond the capability of the
      ATT&CK Navigator, and generated by tools for import into the Navigator.
      The Layer file format is described <a href="assets/NavigatorLayerFileFormatv4.pdf">here</a>.
    </p>


    <h2 id="help_Creating_New_Layers">Creating New Layers</h2>
    <p>
        To create a new layer, open a new tab and click the "Create New Layer" dropdown.
        The quick access buttons will create a layer with the current version of ATT&CK.
        Past versions of ATT&CK compatible with the Navigator are accessible in the 
        "More Options" dropdown. This interface allows you to specify the desired version
        and domain for the new layer. Note that for performance reasons, the Navigator 
        currently imposes a limit of ten (10) active layers at any given point in time.
    </p>
    <h2 id="help_Saving_and_Loading_Layers">Saving and Loading Layers</h2>
    <p>
        Layers can be saved by clicking the "save layer" button (<img src="assets/icons/ic_file_download_black_24px.svg">). This will open a dialog
        to save a layer configuration file to your local computer. This contains
        the configuration for the techniques that have been customized
        (commented, colored, assigned a score, or disabled) as well as the
        scoring gradient setup, filter selection, layer name, layer description,
        view configuration.
    </p>
    <p>
        Saved layer configuration files can be opened in the ATT&CK Navigator to
        restore a layer you've worked on previously. To do so, open a new tab
        and open the "Open Existing Layer" panel. Then click "Upload from
        local", and select your saved configuration file. Doing so will restore
        your saved layer to the ATT&CK Navigator. This interface also has a "load from URL"
        input allowing you to open a layer json from a remote source.
    </p>
    <h2 id="help_Creating_Layers_from_Other_Layers">Creating Layers from Other Layers</h2>
    <p>
        Layers can be created which inherit properties from other layers. Several fields
        exist which can be used to choose which layers to inherit properties from:
    </p>
    <ul>
        <li>
            <p>
                <b>Domain:</b> choose the domain and version for the new layer. Layers can only inherit
                properties from other layers of the same domain and version.
            </p>
        </li>
        <li>
            <p>
                <b>Score Expression:</b> Technique <a href="#help_Scoring_Techniques">scores</a>  in the created layer are
                initialized to the result of this expression. This field should take
                the form of an equation or constant, using variables for layers.
                Layer variables are shown in yellow on tabs when the "create layer
                from other layers" panel is opened:
            </p>
            <img src="assets/image_scoreVariableExample.png" height="100px">
            <p>
                Each technique's score is created independently using the score expression. For example,
                with a score expression of <code>a+b</code>, some technique <i>t</i> in the output layer would
                be the sum of <i>t<sub>a</sub></i> and <i>t<sub>b</sub></i>.
            </p>
            <p>
                Expressions can also be comparative, for example <code>a>b</code>
                will create a layer with a score of 1 whereever <code>a>b</code> and
                0 whereever <code>a<=b</code>. Such boolean expressions can be
                extended using <code>and</code>, <code>or</code>, <code>xor</code>
                and <code>not</code>. You can also use ternary expressions such as <code>a > b ? 25 : 10</code>
                See <a href="http://mathjs.org/docs/expressions/syntax.html#operators">
                    this page</a> for a  full list of operators.
                </p>
                Some example score expressions:
                <ul>
                    <li>
                        <code>(a+b)/2</code> (average two layers)
                    </li>
                    <li>
                        <code>a+b+c</code>
                    </li>
                    <li>
                        <code>a*(b+c)</code>
                    </li>
                    <li>
                        <code>100-a</code> (reverse the scoring of <code>a</code>, assuming <code>a</code> is on a 0-100 scale)
                    </li>
                    <li>
                        <code>(a>b) and (a>=75)</code>
                    </li>
                </ul>
            </li>
            <li>
                <b>Gradient:</b> choose which layer to inherit <a href="#help_Scoring_Gradient">scoring gradient</a> from.
            </li>
            <li>
                <b>Coloring:</b> choose which layer to inherit <a href="#help_Assigning_Manual_Colors">manually assigned technique colors</a> from.
            </li>
            <li>
                <b>Comments:</b> choose which layer to inherit <a href="#help_Adding_Comments_to_Techniques">technique comments</a> from.
            </li>
            <li>
                <b>States:</b> choose which layer to inherit technique <a href="#help_Disabling_Techniques">enabled/disabled states</a> from.
            </li>
            <li>
                <b>Filters:</b> choose which layer to inherit <a href="#help_Filtering">layer filter configuration</a> from.
            </li>
            <li>
                <b>Legend:</b> choose which layer to inherit <a href="#help_Legend">legend items</a> from.
            </li>
        </ul>
        <p>
            Tactic-spanning Techniques are evaluated individually: if a technique is annotated differently
            in two tactics, the output layers' techniques will honor this difference.
        </p>
        <p>
            <b>Tip:</b> Score expressions don't need to use variables! You can use
            this to create a new layer with a constant score for each technique. For
            example, if you wanted a new layer where all techniques are scored 50, you 
            could simply type 50 into the score expression input.
        </p>

        <h1 id="help_Layer_Controls">Layer Controls</h1>
        <h2 id="help_Layer_Information">
            <img src="assets/icons/ic_description_black_24px.svg">
            Layer Information
        </h2>
        <p>
                The layer name and description can be edited in the layer information dropdown. The layer name can also be edited where it appears in the tab title. 
                Additionally, the layer information panel allows the user to add metadata to the layer. Metadata can be useful for supporting other applications that use the layer format, 
                or for attaching additional descriptive fields to the layer. 
        </p>
        <p>
          
            <b>Note:</b> techniques can also have metadata, however metadata on techniques is not editable in the Navigator. Metadata on techniques is shown
            in tooltips.
        </p>
        

        <h2 id="help_Sorting">
            Sorting
        </h2>
        <p>
            There are four modes of sorting. Clicking the sorting button will toggle between the modes.
        </p>

        <ul>
            <li>
                <img src="assets/icons/ic_sort_alphabetically_ascending_black_24px.svg"/>
                The table will sort techniques alphabietically by name in ascending order.
            </li>
            <li>
                <img src="assets/icons/ic_sort_alphabetically_descending_black_24px.svg"/>
                The table will sort techniques alphabetically by name in descending order.
            </li>
            <li>
                <img src="assets/icons/ic_sort_numerically_ascending_black_24px.svg"/>
                The table will sort techniques by their score in ascending order. Techniques with no score are treated as if their score is 0.
            </li>
            <li>
                <img src="assets/icons/ic_sort_numerically_descending_black_24px.svg"/>
                The table will sort techniques by their score in descending order. Techniques with no score are treated as if their score is 0.
            </li>
        </ul>



        <h2 id="help_Filtering">
            <img src="assets/icons/ic_filter_list_black_24px.svg"/>
            Filtering
        </h2>
        <p>
            The list of techniques and tactics can be filtered in the filtering menu.
            Filters are additive - the displayed set of techniques is the logical <i>or</i>
            of the techniques of the filters selected.
        </p>
        <h3>Platform Filter</h3>
        <p>
            The platform filter allows the user to control which techniques are
            included in a layer based on whether or not a particular technique
            applies to a particular technology platform.  Technology platforms
            are tied to the specific technology domain you are visualizing. For
            the Enterprise technology domain, the defined platforms are:
            PRE, Windows, Linux, macOS, Network, AWS, GCP, Azure, Azure AD, Office 365, and SaaS.  For the Mobile technology domain, the
            defined platforms are: Android and iOS. For the ICS technology domain, the defined platforms are Windows, Control Server, Data Historian, "Engineering Workstation", Field Controller/RTU/PLC/IED, Human-Machine Interface, Input/Output Server, Safety Instrumented System/Protection Relay.
        </p>
        <p>
            Each technique in an ATT&CK matrix is tied to one or more platforms.
            In the Navigator, if you wanted to see only those techniques in
            Enterprise ATT&CK which applied to the Linux platform, you would
            deselect "Windows" and "macOS" under the platform filter. If later you
            decided to also include techniques known to apply to macOS
            platforms, you could select "macOS" as well and those techniques would
            be added to the visible layer.
        </p>

        <p>
            <b>Tip:</b> Techniques can also be hidden from your view by using the <a href="#help_Hiding_Disabled_Techniques">hide disabled techniques</a>
            button. Couple this with the <a href="#help_Multiselct_Interface">multiselect interface</a>
            to hide techniques which are contained in specific threat or software groupings.
        </p>

        <h2 id="help_Color_Setup">
            <img src="assets/icons/ic_palette_black_24px.svg"/>
            Color Setup
        </h2>
        <h3 id="help_Tactic_Row_Background">
            Tactic Row Background
        </h3>
        <p>
            The background color of the tactic row can be set in the tactic row background section of the color setup menu. The color
            will only be displayed if the "show" checkbox is selected. The tactic row background will not be shown when in the <a href="#help_Mini_Layout">mini view</a>.
        </p>


        <h3 id="help_Scoring_Gradient">Scoring Gradient</h3>
        <p>
            Techniques which are assigned a score will be colored according to a
            gradient defined in the scoring gradient section in the color setup menu. Technique scores are
            mapped to a color scaled linearly between the "low value" and "high value"
            inputs. For example, on a red-green scale, if "low value" were set to 0 and
            "high value" were set to 50, a score of 25 would fall on yellow -- exactly
            halfway between red and green. Scores below the low value are colored as if
            they have the low value, and scores above the high value are colored as if
            they have the high value.
        </p>
        <p>
            Several preset gradients are present within the preset dropdown. If no preset
            matches your desired gradient, you can create your own by adding and removing
            colors using the interface.
        </p>
        <p>
            <b>Tip:</b> If your scores are binary (0 or 1), consider setting the low
            value of 0 to white and the high of 1 to some other
            color to only color the techniques which have the value of 1.
        </p>

        <h2 id="help_Hiding_Disabled_Techniques">
            <img src="assets/icons/ic_visibility_off_black_24px.svg">
            Hiding Disabled Techniques
        </h2>
        <p>
            Techniques that are <a href="#help_Disabling_Techniques">disabled</a> can be hidden by toggling the "hide disabled techniques" button.
            Hidden techniques are still present in the data when saved and can still be annotated, but won't be visible in the view.
        </p>
        <p>
            <b>Tip:</b> This button has powerful synergy with the <a
            href="#help_Multiselct_Interface">multiselect interface</a>. Use the
            multiselect interface to select techniques which match your criteria,
            disable them, and then turn on hiding disabled techniques to remove entire
            groups of techniques from your view.
        </p>

        <h2 id="help_Show_Hide_Subtechniques">
            Showing or Hiding Sub-techniques
        </h2>
        <p>
            Sub-techniques in the view are nested under their parent technique and are hidden by default. 
        </p>
        <ul>
            <li>
                <img src="assets/icons/unfold_more_black_24px.svg">
                All sub-techniques can be shown by clicking the "expand sub-techniques" button.
            </li>
            <li>
                <img src="assets/icons/unfold_less_black_24px.svg">
                All sub-techniques can be hidden by clicking the "collapse sub-techniques" button.
            </li>
        </ul>
        <p>
            <b>Tip:</b> Sub-techniques can also be shown or hidden on each individual 
            technique when in the <a href="#help_Side_Layout">side layout</a> or 
            <a href="#help_Flat_Layout">flat layout</a> by clicking the gray sidebar on the
            technique cell.
        </p>


        <h2 id="help_Changing_Layout">
            <img src="assets/icons/ic_view_large_black_24px.svg">
            Configuring the layout
        </h2>
        <p>
            The ATT&CK Navigator has controls for how the ATT&CK Matrices are displayed. Access controls to change layout via the "Matrix Layout" dropdown menu. 
        </p>
        <h3 id="help_Side_Layout">
            Side Layout
        </h3>
        <p>
            The side layout displays sub-techniques adjacent to their parent techniques. Techniques with sub-techniques are denoted by the presence of a right-positioned sidebar which can be clicked to show sub-techniques. Sub-techniques are differentiated from techniques by position in the tactic column. 
        </p>
        <h3 id="help_Flat_Layout">
            Flat Layout
        </h3>
        <p>
            The flat layout displays subtechniques in-line with the techniques. Techniques with subtechniques are denoted by the presence of a left-positioned sidebar which can be clicked to show subtechniques. Subtechniques are differentiated from techniques by indentation.
        </p>

        <h3 id="help_Mini_Layout">
            Mini Layout
        </h3>
        <p>
            The mini layout is designed to fit more techniques on the screen
            simultaneously by reducing their size. To do so all text is removed
            and techniques are visualized as squares under the tactic. Selecting this layout disables <a href="#help_IDs_Names">the "show IDs" and "show Names" controls</a>.
            
            Tactic headers are visualized as black cells above the columns. Technique
            and tactic names are displayed as tooltips when you hover over a
            technique or tactic-header cell. 

            Techniques and their sub-techniques are grouped inside of an outlined box. The technique is the dark-outlined first cell of the group, and the rest of the cells of the group are the sub-techniques.

            Techniques without sub-techniques are displayed without a grouping box, and may appear inline with other sub-techniques-less techniques.

            Disabled techniques are denoted with an "x" symbol. Techniques with comments are denoted with an "i" symbol.
        </p>
        <h3 id="help_IDs_Names">
            Showing IDs and Names
        </h3>
        <p>
            In the side and flat layouts, you can change what is shown inside of the technique cells. Enabling "show names" (enabled by default) will show technique and tactic names on each cell of the matrix. Enabling "show IDs" (disabled by default) will show ATT&CK IDs (e.g "T1000" for techniques, or "TA1000" for tactics) on each cell of the matrix.

            These controls can be toggled independantly and turned off entirely to remove cell labels entirely. The mini layout forces both of these controls to be disabled.
        </p>
        <h2 id="help_Legend">
            Legend
        </h2>
        <p>
            The legend helps associate meanings with colors displayed by customized techniques in the ATT&CK Navigator.
            To open the legend, click on the bar labled "legend" in the bottom-right corner of the screen. Click on the same bar to close the legend. To add an item to the legend, click the "Add Item"
            button. To clear all items in the legend, click "Clear".
            <br/><br/>
            An item's color can be changed by either clicking in the color field and typing a hex color value, or by clicking in the field and choosing a color from the color picker. Click and type in the
            text field to change the item's label. To remove an item, click on the (<img src="assets/icons/ic_clear_gray_24px.svg"/>) button on the right side. Legend items are saved to the layer file and will be
            loaded when a layer with saved legend items is loaded.
        </p>

        <h1 id="help_Technique_Controls">Technique Controls</h1>
        <p>
            Techniques in the layer can be annotated. The technique controls on the menubar
            are only enabled when one or more techniques are <a href="#help_Selecting_Techniques">selected</a>.
            If multiple techniques are selected, they will all be annotated simultaneously.
        </p>



        <h2 id="help_Disabling_Techniques">
            <img src="assets/icons/ic_texture_black_24px.svg">
            Disabling Techniques
        </h2>
        <p>
            Clicking the "toggle state" button toggles selected techniques between an
            enabled and disabled state. In the disabled state, the technique text is greyed
            out and no colors (<a href="#help_Assigning_Manual_Colors">assigned manually</a> or via <a href="#help_Scoring_Techniques">score</a>)
            will be displayed.
        </p>
        <p>
            The <a href="#help_Hiding_Disabled_Techniques">hide disabled techniques</a>
            button can be used to hide disabled techniques from the view.
        </p>

        <h2 id="help_Assigning_Manual_Colors">
            <img src="assets/icons/ic_format_color_fill_black_24px.svg">
            Assigning Manual Colors
        </h2>
        <p>
            Techniques can be assigned colors manually. Manually assigned colors supersede
            colors created by score. To remove a manually assigned color, select the "no color"
            box at the top of the interface.
        </p>

        <h2 id="help_Scoring_Techniques">
            <img src="assets/icons/ic_insert_chart_black_24px.svg">
            Scoring Techniques
        </h2>
        <p>
            A score is a numeric value assigned to a technique. The meaning or
            interpretation of scores is completely up to the user user - the
            Navigator simply visualizes the matrix based on any scores you have
            assigned. Some possible uses of scores include:
        </p>
        <ul>
            <li>
                Assigning a score to techniques based on whether or not a given
                adversary group has been observed to use that technique.
            </li>
            <li>
                Assigning a score to techniques based on your organization's
                ability to detect, prevent and/or mitigate the use of a
                particular technique.
            </li>
             <li>
                 Assigning a score to those techniques that a red-team has
                 successfully employed during an exercise.
             </li>
        </ul>
        <p>
            By default, techniques are "unscored" meaning that no score has been
            assigned to the technique.  Note that "unscored" and a score of zero
            are not the same, specifically with respect to automatically
            assigned colors. Scores show up in technique tooltips if a score has
            been assigned. To change a technique with a numeric score to
            unscored, select the technique and delete the score value in the score
            control. The technique will revert to unscored.
        </p>
        <p>
            Techniques are automatically assigned a color according to its
            score. This color is determined according to the <a href="#help_Scoring">scoring gradient setup interface</a>. Colors
            assigned <a href="#help_Assigning_Manual_Colors">manually</a>
            supersede the score-generated color. It is a good idea to assign
            techniques scores inside of a predetermined range, such as 0-1 or 0-100. Set
            the "high value" and "low value" inputs in the <a href="#help_Scoring">scoring gradient setup interface</a> to this
            range to make sure that the color for the score is properly mapped
            to the gradient. Techniques that are unscored are not assigned a
            color based on the gradient - they are displayed with a white
            background in the matrix.
        </p>

        <h2 id="help_Adding_Comments_to_Techniques">
            <img src="assets/icons/ic_insert_comment_black_24px.svg">
            Adding Comments to Techniques
        </h2>
        <p>
            A text comment can be added to techniques. This comment will show up in the technique tooltip if a comment has been added.
            Techniques with a comment will be given a yellow underline.
        </p>
        <h2 id="help_Clearing_Selected_Techniques_Annotations">
            <img src="assets/icons/ic_clear_black_24px.svg">
            Clearing Annotations on Techniques
        </h2>
        <p>
            Clicking the "clear annotations on selected" button removes comments,
            colors, scores, and enabled/disabled state from all selected techniques.
        </p>

        <h1 id="help_Selecting_Techniques">Selecting Techniques</h1>

        <p>
            In order to be annotated, techniques must first be selected. There are multiple ways
            to select techniques.
        </p>
        <h2 id="help_Selecting_with_the_Mouse">Selecting with the Mouse</h2>
        <p>
            Techniques can be selected using the mouse. Left click a technique to select
            it. Pressing control (windows) command (mac) or shift (both) while left-clicking a technique will add it to or remove it from the selection. Right
            clicking a technique will bring up a context menu with more options:
        </p>
        <ul>
            <li><b>select:</b> Select only this technique.</li>
            <li><b>add to selection:</b> Add this technique to the selection.</li>
            <li><b>remove from selection:</b> Remove this technique from the selection.</li>
            <li><b>invert selection:</b> Select all techniques that are not currently selected and unselect all techniques that are currently selected.</li>
            <li><b>select all:</b> Select all techniques.</li>
            <li><b>deselect all:</b> Deselect all techniques. This action can also be completed by the "deselect" (<img src="assets/icons/ic_clear_black_24px.svg"/>) button.</li>
            <li><b>select annotated:</b> Select all techniques and sub-techniques which have annotations or remove unnanotated techniques from an existing selection.</li>
            <li><b>select unannotated:</b> Select all techniques and sub-techniques which do not have annotations or remove annotated techniques from an existing selection.</li>
            <li><b>select all techniques in tactic:</b> Select all techniques in this tactic. This action can also be completed by clicking on the tactic header and follows the behavior preference under <a href="#help_Selection_Behavior">selection behavior</a> in the selection controls.
                If the “select techniques across tactics” control is enabled, the selection will include instances of techniques that are in other tactics. Disable this control to select only the instances of techniques that are within this tactic. Sub-techniques within the tactic can be selected along with their parent technique by enabling the “select sub-techniques with parent” control. </li>
            <li><b>deselect all techniques in tactic:</b> Deselect all techniques in this tactic. This action follows the behavior preference under <a href="#help_Selection_Behavior">selection behavior</a> in the selection controls.
                If the “select techniques across tactics” control is enabled, instances of techniques across all tactics will be deselected. Disable this control to remove only the instances of techniques within this tactic from the selection. Sub-techniques in this tactic will be deselected with their parent technique if the “select sub-techniques with parent” control is enabled. Note that currently selected sub-techniques will remain selected if the control is disabled when using this option.</li>
            <li><b>view technique:</b> For more information / details on the technique.</li>
            <li><b>view tactic:</b> For more information / details on the tactic.</li>
        </ul>
        <p><b>Tip:</b> You can use "select unannotated" followed by disabling those techniques, and then hiding disabled techniques, 
            to create a layer where only annotated techniques are visible.
        </p>

        <h2 id="help_Selection_Behavior">
            <img src="assets/icons/ic_lock_black_24px.svg">
            Selection Behavior
        </h2>
        <p>
            The selection behavior controls affect how sub-techniques are selected with regards to tactics and sub-techniques.
        </p>
        <ul>
            <li><b>Select techniques across tactics</b> toggles whether selecting a technique that is found in multiple tactics selects it in all tactics, or just the one wherein it was clicked.</li> 
            <li><b>Select sub-techniques with parent</b> toggles whether sub-techniques are selected alongside their parents, and vice versa. When enabled, clicking on a technique will also select all of the sub-techniques of that technique. In addition,clicking a sub-technique will also select the parent as well as all sibling sub-techniques. When disabled, sub-techniques are selected independantly of parents and siblings.</li> 
        </ul>

        <h2 id="help_Search_Interface">
            <img src="assets/icons/ic_search_black_24px.svg">
            Search Interface
        </h2>
        <p>
            The search interface provides a text input to search through techniques in the matrix.
            Toggles in the interface allow for searching of specific technique fields (name, ID, and description).
        </p>
        <p>
            The interface provides
            buttons to select and deselect techniques. These buttons modify the currently selected techniques rather
            than replacing then, allowing for the selection of the multiple techniques by selecting them in sequence.
            There are 'view' links that lead to more info on each technique.
        </p>
        <p>
            Buttons labelled 'select all' and 'deselect all' are provided to quickly select/deselect all techniques in the results
            area.
        </p>

        <h2 id="help_Multiselct_Interface">
            <img src="assets/icons/ic_playlist_add_black_24px.svg">
            Multiselect Interface
        </h2>
        <p>
            The multiselect interface provides a way to quickly select and deselect
            groups of techniques. The interface provides two types of groupings, threat
            groups and software. Threat groups constitute related intrusion activity
            tracked by a common name. Software constitutes software, malware
            or utilities that use known techniques for intrusion.
        </p>
        <p>
            The interface provides
            buttons to select and deselect techniques associated with each software or
            threat group. These buttons modify the currently selected techniques rather
            than replacing then, allowing for the selection of the techniques of multiple
            threat groups or software by selecting them in sequence.
        </p>
        <p>
            Threat groups and software in the list are given a gray background when all
            of their techniques are selected, even if the selection was not made using
            the multiselect interface.
        </p>

        <h1 id="help_Customizing_The_Navigator">Customizing The Navigator</h1>
        <p>
            The ATT&CK Navigator can be customized by modifying the fragment (e.g <code>example.com<b>#fragment</b></code>) of the URL.
            A panel on the new tab page exists to build a properly formatted ATT&CK Navigator URL
            such that, when opened, it will create an ATT&CK Navigator instance with the desired
            customizations. This feature may be useful for sharing or embedding the ATT&CK Navigator.
        </p>


        <h2 id="help_Default_Layers">Default Layers</h2>
        <p>
            Click the "add a layer link" button, then enter a default layer URL pointing to a layer hosted on the web. 
            This will cause the customized ATT&CK Navigator to initialize with this layer open by default. 
            This is especially useful for embedding or sharing specific layers.
        </p>
        <p>
            You can click the "add another layer link" button to specify additional default layers, or click the "x" button next to a layer link you've already added to remove it.
        </p>
        <p>
            The following is an example ATT&CK Navigator URL with the default layer specified to be the *Bear APTs layer from <a href="https://github.com/mitre-attack/attack-navigator">our github repo</a>: <br /><code>https://mitre-attack.github.io/attack-navigator/enterprise/<b>#layerURL=https%3A%2F%2Fraw.githubusercontent.com%2Fmitre%2Fattack-navigator%2Fmaster%2Flayers%2Fdata%2Fsamples%2FBear_APT.json</b></code>
        </p>


        <h2 id="help_Disable_Features">Disabling Features</h2>
        <p>
            Individual ATT&CK Navigator features can be disabled with the checkboxes. Removing
            a feature only removes the interface elements of the feature -- opened
            layers utilizing those features will still have them present. For example,
            even if comments are disabled layers with comments present will still display
            them visually and in tooltips.
        </p>
        <p>
            If you are hosting your own navigator instance, you can also disable
            features by editing the configuration file <code>assets/config.json</code>.
        </p>
        <p>
            The following is an example ATT&CK Navigator URL with the ability to download the layer and add comments disabled: <br /><code>https://mitre-attack.github.io/attack-navigator/enterprise/<b>#download_layer=false&comments=false</b></code>
        </p>

        <h1 id="help_Rendering_Layers_As_SVG">
            <img src="assets/icons/ic_camera_alt_black_24px.svg">
            Rendering Layers as SVG
        </h1>
        <p>
            Clicking the "render layer to SVG" button will open a new tab allowing the current layer
            to be rendered to an SVG image. Changes to the layer after opening the render tab
            will not be reflected in the render layer. 
        </p>
        <p>
            <b>Note:</b> this feature has minor compatability warnings
            with the Internet Explorer browser. For best results, please use Safari, Firefox, Chrome or Edge.
        </p>
        <p>
            Clicking the <i>download svg</i> button (<img src="assets/icons/ic_file_download_black_24px.svg">) will download
            the image, as displayed, in SVG format.
        </p>
        <p>
            The Microsoft Edge browser has a bug where the downloaded SVG
            will have the <code>.txt</code> extension. Renaming the extension to <code>.svg</code> will
            restore it as a valid svg file.
        </p>

        <h2 id="help_exporting_units">Measurement Units</h2>
        <p>
            Clicking the "toggle measurement unit" button will toggle between
            measuring in inches (in), centimeters (cm), and pixels (px). This unit
            applies to controls for image size and legend position.
        </p>

        <h2 id="help_exporting_image_size">
            <img src="assets/icons/ic_photo_size_select_large_black_24px.svg">
            Configuring Image Size
        </h2>
        <p>
            The image size controls allow you to specify the width and height of
            the image, as well as the height of the header if one is present.
            The measurements are in units specified by the <a href="#help_exporting_units">measurement units</a> control.
        </p>
        <p>
            The header height contributes to the total image height: if you have specified
            the image height to be 8.5 inches and the header height to be 1 inch,
            the technique table will be 7.5 inches and the header 1 inch for a total height of 8.5 inches.
            If the header is disabled this control will not be editable.
        </p>
        <h2 id="help_exporting_text">
            <img src="assets/icons/ic_format_size_black_24px.svg">
            Configuring Text
        </h2>
        <p>
            The text configuration dropdown allows for the configuration of the font
            (serif, sans-serif, and monospace) of the exported render. 
        </p>
        <p>
            Unlike in previous versions of the Navigator, in ATT&CK Navigator Version {{nav_version}} text size is automatically
            calculated to optimize readability.
        </p>
        <h2 id="help_exporting_legend_config">
            <img src="assets/icons/ic_view_list_black_24px.svg">
            Customizing the Legend
        </h2>
        <p>
            This menu can only be opened if a <a href="#help_Legend">legend</a> is present on the layer or if techniques have been assigned scores.
            The checkbox allows you to undock the legend from the SVG header.
            Once undocked, the X and Y position controls can be used to position
            the legend in the image. The width and height inputs control
            the size of the legend when it is undocked. The measurements are in units specified by the <a href="#help_exporting_units">measurement units</a> control.
        </p>

        <h2 id="help_exporting_display_settings">
            <img src="assets/icons/ic_visibility_black_24px.svg">
            Display Settings
        </h2>
        <p>
            The header itself, or specific parts of the header, can be hidden
            using the controls in this dropdown. The color of table cell borders
            can also be edited.
        </p>
        <ul>
            <li>
                <b>Show header</b> controls whether the header is shown at all. If
                the legend is undocked from the header it will still be shown.
            </li>
            <li>
                <b>Show about</b> controls whether the about (layer name and description) section of the header is visible. If the layer has no name nor description, the control will be disabled and the section automatically hidden.
            </li>
            <li>
                <b>Show filters</b> controls whether the current filters (selected platforms) are visible in
                the header. This control will be disabled if the header is hidden in entirety.
            </li>
            <li>
                <b>Show legend</b> controls whether the layer legend is visible.
                If the layer has no defined legend items or no scores, the control will be disabled and the legend will be automatically hidden.
            </li>
            <li>
                The <b>sub-techniques</b> dropdown controls the visibility of sub-techniques in the rendered layer. 
                Selecting "show all" will show all sub-techniques, "show expanded" will show sub-techniques whose parent techniques were expanded when the render button was clicked, and "show none" will show no sub-techniques.
            </li>
            <li>
                <b>Cell border</b> controls the border of cells in the body of the table.
                The borders in the header are not modified by this control. Note that you must click "apply" in the color picker
                for your change to take effect.
            </li>
        </ul>

        <h1 id="help_Rendering_Layers_As_XLSX">
            <img src="assets/icons/baseline-grid_on-24px.svg">
            Exporting layers to MS Excel
        </h1>
        <p>
            Layers can be exported to MS excel (.xlsx) format. Clicking on the "export to excel" button in the toolbar will download an .xlsx
            file which contains the current layer. This layer contains the annotations from the view --
            color (via score or manually assigned) and disabled states. The exporter also honors tactic header background, sorting, filtering and hidden techniques.
        </p>

        <h1 id="notice">Notice</h1>
        <p>Copyright 2020 The MITRE Corporation</p>
        <p>Approved for Public Release; Distribution Unlimited. Case Number 18-0128.</p>
        <p>
            Licensed under the Apache License, Version 2.0 (the "License"); you may not
            use this file except in compliance with the License. You may obtain a copy
            of the License at
        </p>
        <ul style="list-style: none">
            <li>http://www.apache.org/licenses/LICENSE-2.0</li>
        </ul>

        <p>
            Unless required by applicable law or agreed to in writing, software
            distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
            WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
            License for the specific language governing permissions and limitations
            under the License.
        </p>

        <p>This project makes use of ATT&CK&reg;</p>
        <a href="https://attack.mitre.org/resources/terms-of-use/">ATT&CK&reg; Terms of Use</a>
    </div>
